<template>
    <div>
        <div style="width: 260px;float: left;height: 300px">
            <el-tree :data="data5" node-key="id" :expand-on-click-node="false" :accordion="true">
                <div @mouseleave="demo2($event)" slot-scope="{ node, data }" style="display: inline-flex">
                    <span @mouseover="demo($event,data,node)">{{node.label}}</span>
                    <span hidden style="margin-left: 4px">
                  <i title="新增" class="el-icon-circle-plus-outline" @click="() => append(data)"/>
                  <i title="删除" class="el-icon-delete" v-if="node.childNodes.length<1" @click="() => remove(node, data)"/>
                </span>
                </div>
            </el-tree>
        </div>
        <div style="width: auto;float: left;margin-left: auto;position: relative;top: 0">
            <el-row>
                <el-form ref="form" label-position="right" :model="formData" label-width="80px" size="small">
                    <el-col :span="12">
                        <el-form-item label="活动区域">
                            <el-select v-model="formData.region" placeholder="请选择活动区域" style="width: 90%">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="活动名称" prop="name" :rules="[{required:true,message:'年龄不能为空'}]">
                            <el-input v-model="formData.name" clearable style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
    </div>
</template>
<script>
    let id = 1000;

    export default {
        data() {
            const data = [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }];
            return {
                data4: JSON.parse(JSON.stringify(data)),
                data5: JSON.parse(JSON.stringify(data)),
                formData: {
                    id: '',
                    name: '',
                    region: ''
                },
            }
        },

        methods: {
            append(data) {
                const newChild = {id: id++, label: 'testtest', children: []};
                if (!data.children) {
                    this.$set(data, 'children', []);
                }
                data.children.push(newChild);
            },

            remove(node, data) {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
            },
            demo(e, data, node) {
                e.target.parentNode.children[1].style.display = "block";
            },
            demo2(e) {
                e.target.children[1].style.display = "none";
            }
        }
    };
</script>

<style>
</style>